<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>问题展示</title>
  <link rel="stylesheet" href="../../static/lib/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../static/css/element.css"/>
  <script src="../../static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../static/js/vue.js"></script>
  <script src="../../static/js/element.js"></script>
  <script src="../../static/js/axios.js"></script>
  <script src="../../static/js/requestjs.js"></script>
  <script src="../../static/lib/layui/layui.js"></script>
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
</head>
<body>
 
<table class="layui-hide" id="demo" lay-filter="test"></table>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
 

<!-- <blockquote class="layui-elem-quote layui-quote-nm layui-hide" id="footer">layui {{ layui.v }} 提供强力驱动</blockquote> -->
  
<script>
layui.config({
  version: '1594038785991' //为了更新 js 缓存，可忽略
});
 
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element //元素操作
  ,slider = layui.slider //滑块
  
  //向世界问个好
  //layer.msg('Hello World');
  
  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
      tips: 1
    });
  });
  
  var tableWidth = $(document).width();
  //执行一个 table 实例
  table.render({
    elem: '#demo'
    ,height: 420
    //,url: 'http://localhost:8080/user' //数据接口
    ,title: '问题审核'
    ,page: true //开启分页
    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left',width:50}
      ,{field: 'q_id', title: 'ID', width:60, sort: true, fixed: 'left'}
      ,{field: 'q_title', title: '类型', width:80}
      ,{field: 'q_content', title: '内容', width:140}
      ,{field: 'q_img_url', title: '图片', width: 100}
	  ,{field: 'q_read_sum', title: '阅读量', width:80}
	  ,{field: 'q_collect_sum', title: '收藏量', width:80} 
      ,{field: 'q_comment_sum', title: '评论量', width:80} 
      ,{field: 'u_state', title: '状态', width: 80}
	  ,{field: 'q_create_time', title: '创建时间', width: 160}
      ,{field: 'q_check_time', title: '审核时间', width: 160}
	  ,{field: 'check_describe', title: '审核描述', width: 100}
      ,{fixed: 'right', width: 114, align:'center', toolbar: '#barDemo'}
	  
    ]],
	data:[{
		q_id:1,
		q_title:"蛀牙",
		q_content:"内容",
		q_img_url:"图片",
		q_read_sum:"111",
		q_collect_sum:11,
		q_comment_sum:2,
		u_state:"上架",
		q_create_time:"2020-08-04 15:53:35",
		q_check_time:"2020-08-04 15:53:38",
		check_describe:"审核通过"
	}]
  });
  
  //监听头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
        layer.msg('添加');
      break;
      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
        }
      break;
      case 'delete':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else {
          layer.msg('删除');
        }
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      layer.msg('查看操作');
    } else if(layEvent === 'edit'){
      layer.confirm('编辑操作', function(index){
        layer.close(index);
      });
    }
  });
  
  //执行一个轮播实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,height: 200
    ,arrow: 'none' //不显示箭头
    ,anim: 'fade' //切换动画方式
  });
  
  //将日期直接嵌套在指定容器中
  var dateIns = laydate.render({
    elem: '#laydateDemo'
    ,position: 'static'
    ,calendar: true //是否开启公历重要节日
    ,mark: { //标记重要日子
      '0-10-14': '生日'
      ,'2020-01-18': '小年'
      ,'2020-01-24': '除夕'
      ,'2020-01-25': '春节'
      ,'2020-02-01': '上班'
    } 
    ,done: function(value, date, endDate){
      if(date.year == 2017 && date.month == 11 && date.date == 30){
        dateIns.hint('一不小心就月底了呢');
      }
    }
    ,change: function(value, date, endDate){
      layer.msg(value)
    }
  });
  
  //分页
  laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,count: 100 //总页数
    ,skin: '#1E9FFF' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
      }
    }
  });
  
  //上传
  upload.render({
    elem: '#uploadDemo'
    ,url: 'https://httpbin.org/post' //改成您自己的上传接口
    ,done: function(res){
      layer.msg('上传成功');
      layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
      console.log(res)
    }
  });
  
  //滑块
  var sliderInst = slider.render({
    elem: '#sliderDemo'
    ,input: true //输入框
  });
  
  /* //底部信息
  var footerTpl = lay('#footer')[0].innerHTML;
  lay('#footer').html(layui.laytpl(footerTpl).render({}))
  .removeClass('layui-hide'); */
});
</script>
</body>
</html>        
        